import React from 'react'
import './header.css'


class Header extends React.Component {
  state = {
    name: '大娴不要吃早饭',
    loginState: '退出'
  }
  searchBook () {
    console.log("我是徐娴的爸爸")
  }
  render () {
    return (
      <div className="header-box">
        <div className="header-container">
          <div className="container_left">
            <img className="logo-img" src={require('../../static/image/header/header_logo.png')} alt="" />
            <div className="input-box">
              <input className="search-input" onChange={this.searchBook} placeholder={this.state.name} type="text" />
              <div className="search-box">
                <img className="search-img" src={require('../../static/image/header/search.png')} alt="" />
              </div>
            </div>
          </div>
          <div className="container-right">
            <div className="header-item">
              <img className="header-message" src={require('../../static/image/header/header_mssage.png')} alt="" />
              <div className="header-Red"></div>
              消息
            </div>
            <div className="header-item font-20 width-60">
              <img className="login-img" src={require('../../static/image/header/header_login.png')} alt="" />
              <div className="header-name">{this.state.name}</div>
            </div>
            <div className="header-item font-14 btn-click">
              {this.state.loginState}
            </div>

          </div>
        </div>
      </div>
    )
  }
}
export default Header